<template>
  <view class="gift-coupon">
    <view class="title">
      <view>赠送优惠券</view>
    </view>
    <view @click="$emit('coupon-click')" class="gift-list" v-for="item in couponList" :key="item.id">
      <view class="info">
        <view class="left">
          <image src="@/static/icon/券.svg" style="width: 60rpx; height: 60rpx"></image>
        </view>
        <view class="center">
          <view>{{ item.name }}</view>
          <view style="font-size: 24rpx; color: #b6b6b6; margin-top: 20rpx">
            {{ item.remark ? (item.remark.length > 15 ? item.remark.slice(0, 15) + '...' : item.remark) : '' }}
          </view>
        </view>
        <view class="right">x{{ item.couponCount || item.count }}张</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    title: {
      default: '',
      type: String
    },
    couponList: {
      type: Array,
      default: []
    }
  }
};
</script>

<style scoped lang="scss">
// 赠送列表
.gift-list {
  margin-top: 10rpx;
  background-color: #fff;
  padding: 10rpx 25rpx;
  border-radius: 10rpx;
  .info {
    display: flex;
    align-items: center;
    border-radius: 10rpx;
    height: 120rpx;
    // border: 1px solid #f2f2f2;
    padding: 10rpx;
    .left {
      width: 100rpx;
      height: 100rpx;
      background-color: #be2a2b;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .center {
      flex: 1;
      padding-left: 30rpx;
    }
    .right {
      padding-right: 20rpx;
    }
  }
}
.title {
  padding: 30rpx 10rpx;
  font-size: 35rpx;
  font-weight: 600;
  & > view {
    padding-left: 20rpx;
    border-left: 4rpx solid #edac2f;
  }
}
</style>
